<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收藏夹</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>  <!--引入jquery -->
<script src="../../static/preAndNext.js"></script>
<script src="../../static/movieRefresh.js"></script>
<link rel="stylesheet" href="../../static/layui/css/layui.css">
<body>

<script>
    let allData, totalPage, currentPage;
    $(document).ready(function () {
        getMovie();
        return false;
    });
    //读取收藏夹信息
    function getMovie(){
        //读取收藏夹信息
        $.ajax({
            async: true,
            url: "[[@{/user/myfavorite}]]",
            type: "post",
            success: function (data) {
                if(data.code==0){
                    totalPage=0;
                    currentPage=0;
                    document.getElementById("totalPage").innerHTML = totalPage;
                    document.getElementById("currentPage").innerHTML = currentPage;
                    window.location.href="/user/loginPage";
                    alert(data.msg);
                }
                else {
                    allData=data;
                    //获得总页数以及初始化当前页数
                    totalPage = Math.trunc(data.data.length / 10);
                    if (data.data.length % 10 != 0) totalPage += 1;
                    currentPage = 1;
                    if (totalPage == 0) currentPage = 0;
                    document.getElementById("totalPage").innerHTML = totalPage;
                    document.getElementById("currentPage").innerHTML = currentPage;
                    setMovieInfo();
                }

            }
        });
        return false;
    }
    //取消收藏
    function uncollect(movieid){

        $.ajax({
            url: '[[@{/user/myfavorite/delete}]]',    //thymeleaf在ajax中设置地址行形式
            data: {
                movieid: movieid,   //与controller中的形参名相同
            },
            type: "POST",
            dataType: "JSON",
            success: function (data) {
                if(data.code==0){
                    alert(data.msg);
                }
                else {
                    window.location.reload();

                }
            }
        });

        return false;
    }


    //电影信息填入
    function setMovieInfo() {
        //标记开始以及结束位置
        let startN = (currentPage - 1) * 10;
        let stopN = currentPage * 10;
        if (stopN > totalPage * 10) stopN = totalPage * 10;
        let movieInfo = "";
        let name = "";
        let rate = "";
        let misc = "";
        let href = "";
        let td = "";
        let detailURL = "";
        let img = "";
        let imgURL = "";
        let movieid;
        let year="";
        //清空界面
        refresh();

        for (let i = startN; i < stopN; i++) {
            let label = "";
            name = "name" + (i % 10);
            rate = "rate" + (i % 10);
            href = "href" + (i % 10);
            img = "img" + (i % 10);
            misc = "misc" + (i % 10);
            year="year"+(i % 10);
            td = "td" + (i % 10);
            imgURL = allData.data[i].movie.post;
            detailURL = allData.data[i].movie.description;
            movieid=allData.data[i].movie.movieid;
            for (let j = 0; j < allData.data[i].list.length; j++) label = label + allData.data[i].list[j].labelname + "|";

            movieInfo = '<div class="movie-content" style="display: inline;">' +
                '<picture>' +
                '<a id=' +
                href +
                ' href=""><img id=' +
                img +
                ' alt="无" class="movie-img" src="" style="display: block;"></a></picture>' +
                '<div class="movie-info"></div><div class="movie-name"><span id=' +
                name +
                ' class="movie-name-text"></span></div><div id=' +
                year+
                ' class="movie-year"></div><div id='+
                rate +
                ' class="movie-rate"></div><div id=' +
                misc +
                ' class="movie-misc">' +
                label +
                '</div></div><button style="background-color:transparent;border-style:none;" type="button" onClick="uncollect(' +
                 movieid+
                ')"><i class="layui-icon layui-icon-heart-fill" style="font-size: 30px;color: red"></i></button>';



            document.getElementById(td).innerHTML = movieInfo;
            document.getElementById(name).innerHTML = allData.data[i].movie.moviename;
            document.getElementById(rate).innerHTML = allData.data[i].movie.rate;
            document.getElementById(href).setAttribute("href", detailURL);
            document.getElementById(img).setAttribute("src", imgURL);
            document.getElementById(year).innerHTML=allData.data[i].movie.updateyear;
        }
        return false;
    }
</script>

<link type="text/css" href="../../static/movieShow.css" rel="stylesheet">

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;


        background: url(../../static/movieBACK.jpg) no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    .container{
        width: 900px;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        padding: 0px;
        z-index: 130;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
        font-size: 16px;

    }
</style>
<a class="layui-btn" href="/Movie/moviePage">返回首页</a>

<div class="container">


    <table class="layui-table" style="width: 800px;margin: 0px auto">
        <tr>
            <td id="td0"></td>
            <td id="td1"></td>
        </tr>
        <tr>
            <td id="td2"></td>
            <td id="td3"></td>
        </tr>
        <tr>
            <td id="td4"></td>
            <td id="td5"></td>
        </tr>
        <tr>
            <td id="td6"></td>
            <td id="td7"></td>
        </tr>
        <tr>
            <td id="td8"></td>
            <td id="td9"></td>
        </tr>

    </table>


    <footer style="text-align: center;">
        <button type="button" onclick="prevPage()">
            上一页
        </button>
        <span>第 <lable id="currentPage">0</lable> 页/共 <lable id="totalPage">0</lable> 页</span>
        <button type="button" onclick="nextPage()">
            下一页
        </button>
    </footer>

</div>

<!-- body 末尾处引入 layui -->
<script src="../../static/layui/layui.js"></script>
</body>
</html>